<template>
  <div class="box-one">
    <!-- 头部 -->
    <header>
      <div class="come-box">
        <div class="box-1">
          <img src="../assets/img/welcome/fk.png" alt="" />
          <span>总访问量</span>
          <div>{{ huoyue }}</div>
        </div>
        <div class="box-2">
          <img src="../assets/img/welcome/cje.png" alt="" />
          <span>今日成交额</span>
          <div>{{ chengjiaoe }}</div>
        </div>
        <div class="box-3">
          <img src="../assets/img/welcome/xl.png" alt="" />
          <span>今日销量</span>
          <div>{{ xiaoliang }}</div>
        </div>
        <div class="box-4">
          <img src="../assets/img/welcome/cjl.png" alt="" />
          <span>成交率</span>
          <div>{{ chengjiaolv }}</div>
        </div>
        <div class="box-5">
          <img src="../assets/img/welcome/user.png" alt="" />
          <span>用户总数</span>
          <div>{{ user }}</div>
        </div>
      </div>
    </header>
    <!-- Echarts图表 -->
    <el-card>
      <div id="main" style="width:1600px; height: 400px"></div>
    </el-card>
  </div>
</template>
<script>
// 导入echarts
// import * as echarts from "echarts";

export default {
  data() {
    return {
      huoyue: 128675 + "次",
      chengjiaoe: 1013457 + "元",
      xiaoliang: 1560 + "台",
      chengjiaolv: 65 + "%",
      user: 18858 + "人",
      option: {
        title: {
          text: "本周销量",
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [
            "红米 Note9",
            "Redmi Note9 Pro",
            "Redmi Note8",
            "红米K30",
            "Redmi Note10"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "红米 Note9",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "Redmi Note9 Pro",
            type: "line",
            stack: "总量",
            data: [220, 282, 191, 234, 290, 330, 310]
          },
          {
            name: "Redmi Note8",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "红米K30",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "Redmi Note10",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },
  mounted() {
    var myCharts = echarts.init(document.getElementById("main"));
    myCharts.setOption(this.option);
  }
};
</script>
<style lang="less" scoped>
.come-box {
  height: 100%;
  padding: 15px;
  display: flex;
  justify-content: space-around;
  .box-1,
  .box-2,
  .box-3,
  .box-4,
  .box-5 {
    display: inline-block;
    width: 310px;
    height: 150px;
    background: #33cabb;
    border-radius: 20px;
    position: relative;
    img {
      position: absolute;
      top: 50px;
      left: 35px;
    }
    span {
      font-size: 18px;
      position: absolute;
      top: 25px;
      right: 40px;
    }
    div {
      position: absolute;
      top: 75px;
      right: 16px;
      font-size: 32px;
      color: #0000cc;
    }
  }
  .box-2 {
    background: #f96868;
    margin-left: 20px;
  }
  .box-3 {
    background: #fb9300;
    margin-left: 20px;
  }
  .box-4 {
    background: #39a9cb;
    margin-left: 20px;
  }
  .box-5 {
    background: #005f99;
    margin-left: 20px;
  }
}
.box-1:hover,
.box-2:hover,
.box-3:hover,
.box-4:hover,
.box-5:hover,
.stores-1:hover,
.stores-2:hover,
.stores-3:hover,
.stores-4:hover,
.stores-5:hover {
  -webkit-animation: bounce 1s 0.1s ease both;
  -moz-animation: bounce 1s 0.1s ease both;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.8) rotate(-2deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(2deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-2deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}
</style>
